<template>
  <a-modal
    title="修改密码"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="旧密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input
            v-decorator="['old', {rules: [{required: true, min: 1, message: '旧密码不能为空'}]}]"
            type="password"
            placeholder="请输入您的旧密码" />
        </a-form-item>
        <a-form-item
          label="密码等级"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-rate v-model="passwordLevel" :tooltips="desc" disabled>
            <a-icon slot="character" type="rocket" />
          </a-rate>
          <span class="ant-rate-text">{{ desc[passwordLevel - 1] }}</span>
        </a-form-item>
        <a-form-item
          label="新密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">

          <a-input
            v-decorator="['password', {rules: [
              {
                required: true,
                message: '请输入您的新密码',
              },
              {
                validator: validateToNextPassword,
              },
            ]}]"
            type="password"
            @change="handleNewBlur"
            placeholder="请输入新密码" />
        </a-form-item>
        <a-form-item
          label="确认密码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input
            v-decorator="['confirm', {rules: [
              {
                required: true,
                message: '请确认您的新密码',
              },
              {
                validator: compareToFirstPassword,
              },
            ]}]"
            type="password"
            @blur="handleConfirmBlur"
            placeholder="请输入确认密码" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { resetPwd } from '@/api/login'
import { mapGetters } from 'vuex'
import { getPasswordSecurityLevel } from '@/utils/util'

export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      passwordLevel: 0,
      desc: ['糟糕', '简单', '一般', '良好', '完美']
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    validateToNextPassword (rule, value, callback) {
      const form = this.form
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true })
      }
      callback()
    },
    compareToFirstPassword (rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('password')) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('请确保您的两次密码输入一致')
      } else {
        callback()
      }
    },
    handleNewBlur (e) {
      const value = e.target.value
      this.passwordLevel = getPasswordSecurityLevel(value) + 1
    },
    handleConfirmBlur (e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    open () {
      this.visible = true
      const { form: { resetFields } } = this
      this.$nextTick(() => {
        resetFields()
      })
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values.password_level = this.passwordLevel
          this.userInfo.password_level = this.passwordLevel
          resetPwd(values).then(res => {
            this.confirmLoading = false
            if (res.code === 0) {
              this.visible = false
              this.$message.success(res.message)
              this.$emit('ok', values)
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
